import React, { useState, useEffect } from "react";
import { ArrowLeft, Close, Passed } from "@react-vant/icons";
import { useNavigate, useLocation } from "react-router-dom";
import { Popup, Cell, Progress } from "react-vant";
import axios from "../axios/index";
type Props = {};

const Ofg = (props: Props) => {
  const [visible, setVisible] = useState(false);
  const navigate = useNavigate();
  const abc = JSON.parse(localStorage.getItem("abc") as any);
  console.log(abc);
  const [obj, setObj]: any = useState(
    JSON.parse(localStorage.getItem("shuju") as any)
  );

  const xzck = () => {
    navigate("/passenger");
  };
  const zhankai = () => {
    navigate("/np");
  };
  const [num, setNum] = useState(0);
  const tj = () => {
    setVisible(true);
    let n = 0;
    let time = setInterval(() => {
      n += 10;
      if (n === 100) {
        clearInterval(time);
        navigate("/home/cfig");
         axios.post("http://localhost:8080/bendiofglist", abc[0]).then((res) => {
          console.log(res.data);
        });
      }
      setNum(n);
    }, 100);
  };
  return (
    <div className="ofs">
      <header>
        <span onClick={() => navigate("/seat")}>
          <ArrowLeft />
        </span>
        <span>订单填写</span>
        <span></span>
      </header>
      <main>
        <div className="main_box">
          <div className="main_box_top">
            <div>
              <p>{obj.start}</p>
              <p>{obj.starttime}</p>
              <p>4月27日</p>
            </div>
            <div>
              <p>{obj.state}</p>
              <p>====》</p>
              <p>耗时{obj.shijain}</p>
            </div>
            <div>
              <p>{obj.end}</p>
              <p>{obj.endtime}</p>
              <p>4月27日</p>
            </div>
          </div>
          <div className="main_box_centent">
            <div className="main_box_centent_top">
              <span>坐席</span>
              <span>
                二等座{" "}
                <span style={{ color: "rgba(233,175,125)" }}>
                  ￥{obj.price}
                </span>
              </span>
            </div>
            <div className="main_box_centent_box">
              <div className="main_box_centent_box_flog">
                {abc &&
                  abc.map((item: any, index: any) => {
                    return (
                      <div className="main_box_centent_box_flog_box">
                        <div className="main_box_centent_box_flog_left">
                          <Close style={{ color: "red", fontSize: "24px" }} />
                        </div>
                        <div className="main_box_centent_box_flog_right">
                          <div className="right_1">
                            <span>姓名:</span>
                            <span>{item.name}</span>
                            <span>{item.type}</span>
                          </div>
                          <div className="right_2">
                            <span>身份证:</span>
                            <span>{item.code}</span>
                          </div>
                        </div>
                      </div>
                    );
                  })}
              </div>
              <div className="main_box_centen_box_btn">
                <span onClick={zhankai}>添加乘客</span>
                <span onClick={xzck}>选择乘客</span>
              </div>
            </div>
          </div>
        </div>
        <Popup
          visible={visible}
          onClose={() => setVisible(false)}
          className="Popup"
        >
          <div style={{ width: "300px", height: "300px" }}>
            <div className="tk_box" style={{ borderBottom: "solid 1px #666" }}>
              <div
                className="tk_box_nr"
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  height: "50px",
                  marginTop: "10px",
                }}
              >
                <div
                  className="tk_box_ne_left"
                  style={{ height: "100%", alignItems: "center" }}
                >
                  <p style={{ color: "#666" }}>请确认车次信息</p>
                  <p>北京上海-上海K102</p>
                </div>
                <div
                  className="tk_box_ne_right"
                  style={{
                    height: "100%",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <Passed color="rgba(100,205,214)" />
                </div>
              </div>
              <div
                className="tk_box_nr"
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  height: "50px",
                  marginTop: "10px",
                }}
              >
                <div
                  className="tk_box_ne_left"
                  style={{ height: "100%", alignItems: "center" }}
                >
                  <p style={{ color: "#666" }}>出发时间</p>
                  <p>4月27日 08:16</p>
                </div>
                <div
                  className="tk_box_ne_right"
                  style={{
                    height: "100%",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <Passed color="rgba(100,205,214)" />
                </div>
              </div>
              <div
                className="tk_box_nr"
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  height: "50px",
                  marginTop: "10px",
                }}
              >
                <div
                  className="tk_box_ne_left"
                  style={{ height: "100%", alignItems: "center" }}
                >
                  <p style={{ color: "#666" }}>乘车人</p>
                  <p></p>
                </div>
                <div
                  className="tk_box_ne_right"
                  style={{
                    height: "100%",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <Passed color="rgba(100,205,214)" />
                </div>
              </div>
              <div
                className="tk_box_nr"
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  height: "50px",
                  marginTop: "10px",
                }}
              >
                <div
                  className="tk_box_ne_left"
                  style={{ height: "100%", alignItems: "center" }}
                >
                  <p style={{ color: "#666" }}>合演乘客信息成功,占座中</p>
                  <p>{num}%</p>
                </div>
                <div
                  className="tk_box_ne_right"
                  style={{
                    height: "100%",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <Passed color="rgba(100,205,214)" />
                </div>
              </div>
            </div>

            <Progress percentage={num} />
          </div>
        </Popup>
      </main>
      <footer>
        <div className="footer_left">
          <p style={{ color: "red" }}>￥{obj.price * abc.length}元</p>
          <p>支付金额</p>
        </div>
        <div>
          <button onClick={tj}>提交订单</button>
        </div>
      </footer>
    </div>
  );
};

export default Ofg;
